<!-- 表单输入 -->
<template>
	<view class="publish-formBox">
		<view class="item" v-for="(res,index) in pageData" :key="index">

			<text class="item-text">{{res.title}}</text>

			<view :class="{
				'item-input':true,
				'item-input2': inputStyle(res.title)
			}">

				<!-- 下拉框 -->
				<view v-if="res.type === 'select'" class="">
					<uni-data-select v-model="res.value" :localdata="selectListData"
						@change="setSelect"></uni-data-select>
				</view>

				<!-- 步进器 -->
				<view v-if="res.type === 'NumberBox'" class="">
					<uv-number-box v-model="res.value" @change="setNumberBox" :inputWidth="180"></uv-number-box>
				</view>

				<!-- 数字输入 -->
				<view v-if="res.type === 'number'" :class="{
					'numberInputBox': getCodeShow
				}">
					<view class="numberInput">
						<uni-easyinput type="number" :trim="true" v-model="res.value" placeholder="请输入内容"
							@change="change(res)">
						</uni-easyinput>
					</view>

					<!-- 获取验证码 -->
					<view class="getCode" v-if="getCodeShow">
						<u-button type="success" :disabled="disabled" @tap="getCode">{{tips}}</u-button>
					</view>
				</view>

				<!-- 验证码输入 -->
				<view class="" v-if="res.type === 'phoneCode'">
					<u-code-input v-model="codeValue" :maxlength="4" fontSize="28" size="70"
						@finish="phoneCodeFinish"></u-code-input>
				</view>

				<!-- input输入 -->
				<view v-if="res.type === 'input'" class="">
					<uni-easyinput type="input" :trim="true" v-model="res.value" :placeholder="'请输入'+res.title"
						@change="change(res)">
					</uni-easyinput>
				</view>

				<!-- 文本框 -->
				<view v-if="res.type === 'textarea'" class="textarea">
					<u--textarea v-model="res.value" @input="change(res)" placeholder="请输入内容" autoHeight></u--textarea>
				</view>

				<!-- 单选框 -->
				<view v-if="res.type === 'switch'" class="">
					<uni-data-checkbox v-model="res.value" :localdata="sex" @change="switchChange"></uni-data-checkbox>
				</view>

				<!-- 地址选择 -->
				<view v-if="res.type === 'mapSelect'" class="">
					<liu-chooseAddress ref="chooseAddress" :typeNumber="1" :cityCode="locationInfo.cityCode"
						@submit="submitAddress">
					</liu-chooseAddress>
				</view>


			</view>

		</view>



	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	// 引入api
	import {
		getAuthCreateCodeApi, // 发送短信
		getAuthregisterApi, // 验证短信
	} from '@/api/activity.js'

	// 引入公共方法
	import text from '@/utils/test.js'


	export default {
		props: {
			/**
			 * 表单提交
			 */
			submit: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				// 下拉框数据
				selectListData: [],


				// 页面数据
				pageData: [
					// {
					// 	title: '推送城市',
					// 	type: 'select',
					// 	value: '', // 输入
					// }, 

					{
						title: '地址',
						type: 'mapSelect',
						value: '', // 输入
					},
					{
						title: '所需人数',
						type: 'NumberBox',
						value: 1,
					},
					{
						title: '性别',
						type: 'switch',
						value: 2,
					},
					{
						title: '联系人',
						type: 'input',
						value: '',
					},
					{
						title: '联系电话',
						type: 'number',
						value: '',
					},
					{
						title: '备注',
						type: 'textarea',
						value: '',
					}

				],


				// 性别数据
				sex: [{
						text: '女',
						value: 2
					},
					{
						text: '男',
						value: 1
					},
					{
						text: '不限',
						value: 0
					},
				],

				// 验证码
				tips: '获取验证码',
				seconds: 10,

				disabled: false, // 获取验证码是否禁用
				codeValue: '', // 验证码输入

				phoneNum: null, // 电话

			};
		},
		computed: {
			...mapGetters(['AreaList', 'userInfo', 'locationInfo']),

			/**
			 * 判断是否应该显示获取验证码
			 */
			getCodeShow() {
				let str = false

				let phone = this.userInfo.phone ? this.userInfo.phone : ''

				this.pageData.map(res => {
					if (res.title === '联系电话' && (res.value !== phone || res.value === '')) {
						str = true
					}
				})

				return str;
			},

			/**
			 * 设置input的下划线
			 */
			inputStyle() {
				return function(val) {
					let str = false
					switch (val) {


						case '所需人数':
							str = true
							break;

						case '备注':
							str = true
							break;
						default:
							str = false
							break;
					}

					return str;
				}
			}
		},
		watch: {
			pageData: {
				handler() {
					this.$emit('submit', this.pageData)
				},
				deep: true,
			},

			/**
			 * 根据是否显示获取验证码来删除多余的验证码
			 */
			getCodeShow() {
				if (!this.getCodeShow) {
					this.clearPhoneCode()
				}
			}

		},
		created() {
			this.init()
		},
		methods: {
			/**
			 * 初始化
			 */
			init() {
				// 城市下拉框数据
				this.selectListData = this.AreaList.map(res => ({
					text: res.name,
					value: res.code,
					data: {
						...res
					}
				}))

				// 联系电话赋值
				this.pageData.map(res => {
					if (res.title === '联系电话') {
						res.value = this.userInfo.phone ? this.userInfo.phone : ''
					}
				})
			},

			/**
			 * 修改步进器
			 */
			setNumberBox(val) {
				// console.log('步进器');
			},

			/**
			 * 输入框修改
			 */
			change(val) {
				if (val.title === '验证码') {
				console.log(val.value.length, '2000000');
					// 赋值
					this.pageData.map(res => {
						if (res.title === '验证码') {
							this.codeValue = res.value
						}
					})

					// 验证短信验证码
					this.phoneCodeFinish()
				}
				// console.log(this.pageData, '输入', val);
			},

			/**
			 * 单选框更改
			 */
			switchChange(val) {
				// console.log('单选框更改',this.pageData[2]);
			},


			/**
			 * 地址选择确定
			 */
			submitAddress(e) {
				if(e.address){
					let str = e.address.split("市")
					e.address = str[str.length-1]
					e['cityName'] = str[0].split('省')[1]
				}
				
				let obj = {}
				for (let key in e) {
					if (key !== 'cityCode') {
						obj[key] = e[key]
					}
				}
				obj['phoneCode'] = e.cityCode

				console.log('出发了没', obj);

				this.pageData.forEach((res, index) => {
					if (res.title === '地址') {
						this.pageData[index].value = obj
					}
				})
			},


			/**
			 * 修改下拉框
			 */
			setSelect(e) {
				// console.log(e, '修改');
			},

			/**
			 * 获取验证码
			 */
			async getCode() {

				// 获取电话
				this.pageData.map(res => {
					if (res.title === '联系电话') {
						this.phoneNum = res.value
					}
				})

				// 正则验证电话
				if (!text.mobile(this.phoneNum)) {
					return this.$public.showText('请输入正确的电话号码')
				} else {

					// 设置验证码点击样式
					this.setCodeStyle(30)

					this.addPhoneCode()


					// 发送短信
					this.getAuthCreateCode(this.phoneNum)
				}
			},

			/**
			 * 增加短信验证码输入
			 */
			addPhoneCode() {

				// 判断添加了验证码没
				let type = false
				this.pageData.map(res => {
					if (res.title === '验证码') {
						type = true
					}
				})
				if (type) {
					return
				}

				// 添加
				this.pageData.forEach((res, index) => {
					if (res.title === '联系电话') {
						console.log('进来几次？');
						return this.pageData.splice(index + 1, 0, {
							title: '验证码',
							type: 'input'
						})
					}
				})

			},
			/**
			 * 去除短信验证码输入
			 */
			clearPhoneCode() {
				this.pageData.forEach((res, index) => {
					if (res.title === '验证码') {
						this.pageData.splice(index, 1)
					}
				})
			},



			/**
			 * 验证码输入结束
			 */
			async phoneCodeFinish() {
				try {
					const res = await getAuthregisterApi({
						phone: this.phoneNum,
						phoneCode: this.codeValue
					})

					if (res.code !== 200) {
						this.codeValue = ''
						console.log(this.codeValue,'kkkkkk222222');
						return
					}
				} catch (err) {
					console.log(err);
				}

			},



			/**
			 * 发送短信
			 */
			async getAuthCreateCode(params) {
				try {
					const res = await getAuthCreateCodeApi(params)

					if (res.code !== 200) {
						return this.$public.showText(res.msg || '请求失败')
					}

					console.log(res, '看看');

				} catch (err) {
					console.log(err);
				}
			},

			/**
			 * 设置获取验证码点击样式
			 */
			setCodeStyle(val) {
				this.disabled = true
				let that = this

				let num = val
				this.tips = num + 's获取'
				let timeOut = setInterval(() => {
					num--
					that.tips = num + 's获取'
				}, 1000)


				setTimeout(() => {
					clearInterval(timeOut)
					that.tips = '重新获取'
					this.disabled = false
				}, val * 1000)
			}


		}
	}
</script>

<style lang="less" scoped>
	.publish-formBox {
		background-color: #fff;
		border-radius: 24rpx;
		#padding(24rpx);

		.item {
			#flex(-, center, center);

			&:not(:last-child) {
				margin-bottom: 24rpx;
			}

			.item-text {
				width: 18%;
				#font(28rpx, #666);
				margin-right: 24rpx;
				text-align: justify;
			}

			.item-input {
				flex: 1;
				border-bottom: 2rpx solid #eee;
				
				// 电话号码
				.numberInputBox {
					#flex(-, -, center);
				
					.numberInput {
						flex: 1;
					}
				
				}
				

				/* #ifdef H5  */
				/deep/ .uni-easyinput__content.is-input-border {
					background-color: rgba(#fff, 0) !important;
					border: none;
				}

				/deep/ .choose-address {
					font-size: 24rpx !important;
					color: #999 !important;
					height: 70rpx;
					#padding(0 0 0 20rpx);
				}

				/deep/ .choose-address2 {
					#padding(24rpx);
				}
				/* #endif */
				
				
				
			}

			.item-input2 {
				border-bottom: none !important;
			}
		}

	}
</style>